<template>
  <div id="shareWordList">
    <!-- 上部搜索条件 -->
    <topSearch
      v-if="streamStatus"
      :form-inline="formInline"
      @toSearch="toSearch"
      :streamStatus="streamStatus"
    ></topSearch>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      id="share-box"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      max-height="700"
      ref="table"
    >
      <el-table-column type="index" width="100" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="一级类型名称" width="280">
        <template slot-scope="scope">
          <span v-if="scope.row.name">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createName" label="创建人" width="220">
        <template slot-scope="scope">
          <span v-if="scope.row.createName">{{ scope.row.createName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="250">
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.status === 'ENABLE'"
            active-text="开启"
            inactive-text="关闭"
            @change="changeSwitch(scope.row, scope.$index)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="number" label="排序" width="200" align="center">
        <template slot-scope="scope">
          <div
            style="width: 100%;cursor: pointor;background-color: #fff;"
            contenteditable="true"
            @blur="editLiveTypeNumber($event, scope.$index)"
          >
            {{ scope.row.number }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="230"
      ></el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </div>
</template>
<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import topSearch from './topSearch' // 上部搜索条件
import { saveScrollMixins } from '@/mixins/saveScroll'
import { getLiveTypes, putLiveType } from '@/api/anchor/live-type'
export default {
  name: 'liveTypeManage',
  msg: '直播分类列表管理-列表页',
  mixins: [saveScrollMixins],
  components: {
    topSearch
  },
  data() {
    return {
      rejectReasonData: null,
      rejectReasonVisible: false,
      fileList: [],
      closeForm: {
        closeMemo: '',
        closePic: '',
        id: ''
      },
      dialogFormVisible: false,
      loading: true,
      total: 0,
      // 搜索条件
      formInline: {
        status: '', // 直播分类状态,默认全部
        createBy: '', // 学院,默认全部
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createBy: '' // 审核人ID
      },
      // 表格数据
      tableData: [],
      // 分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 传递给新增弹框的数据
      addDialogData: {
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 传递给导入弹框的数据
      importDialogData: {
        title: '创建分享语管理',
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 导入失败弹框的数据
      errorDialogData: {
        isShow: false, // 控制弹框显示
        warningText: '' // 参数
      },
      // 选择框选中的数据
      multipleSelection: [],
      // 认证状态列表
      streamStatus: []
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
    this.getStatusList()
  },
  methods: {
    editLiveTypeNumber(e, tableIndex) {
      if (this.tableData[tableIndex].number === parseInt(e.target.innerText))
        return false
      const data = {
        number: parseInt(e.target.innerText),
        id: this.tableData[tableIndex].id
      }
      putLiveType(
        data,
        (response) => {
          this.tableData = []
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    changeSwitch({ id, status }, index) {
      const desc =
        status == 'ENABLE' ? '是否禁用该直播间分类？' : '是否启用该直播间分类？'
      const title = status == 'ENABLE' ? '禁用分类' : '启用分类'
      this.$confirm(desc, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          putLiveType(
            { id, status: status == 'ENABLE' ? 'DISABLE' : 'ENABLE' },
            (response) => {
              this.searchList()
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        })
        .catch(() => {})
    },
    /* 字典英文转汉字 */
    filterName(id, name) {
      let obj = this.$store.state['valueTokey'][name]
      if (id && obj && obj[id]) {
        return obj[id].name
      }
      return ''
    },
    /* 获取字典状态 */
    async getStatusList() {
      // 直播分类列表
      let data = await sysNormalDisable('live_type_status', 'live_type_status')
      this.streamStatus = data
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign(
        { parentId: 0 },
        this.searchParams,
        this.formInline
      )
      delete obj.createTime
      let params = obj
      getLiveTypes(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 新增后，刷新列表 */
    refresh() {
      this.formInline = {
        status: '',
        createBy: '',
        startTime: '',
        endTime: '',
        createBy: ''
      }
      this.toSearch()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less">
#shareWordList {
  .el-table {
    margin-top: 20px;
  }
}
</style>
